<!--
 * @Author: darkgoldenrod(暮秋)
 * @Date: 2022-04-14 16:04:24
 * @LastEditTime: 2022-04-25 14:11:07
 * @LastEditors: darkgoldenrod(暮秋)
 * @Description: 
 * @FilePath: \vue_咸鱼\spuertalkl\src\views\dataShow\supertopic.vue
-->
<template>
  <div id="supertalk">
      <div><h2>超话数据可视化</h2></div>
      <el-row :gutter="20">
          <el-col :span="4">
            <el-select
            v-model="value1"
            style="margin-left: 20px;"
            placeholder="请选择要改变的图">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </el-col>
        <el-col>
          <el-col :span="4">
            <el-select
            v-model="value2"
            style="margin-left: 20px;"
            placeholder="请选择要">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        </el-col>
        <el-col>

          <el-col :span="4">
            <el-select
            v-model="value3"
            style="margin-left: 20px;"
            placeholder="请选择性别">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </el-col>
        </el-col>
        <el-col>
          <el-col :span="4">
            <el-select
            v-model="value4"
            style="margin-left: 20px;"
            placeholder="请选择要改变的图">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          </el-col>
        </el-col>
        <el-col>
          <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
        </el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="7"><div id="topleft"></div></el-col>
          <el-col :span="8"><div id="topmiddle"></div></el-col>
          <el-col :span="7"><div id="topright"></div></el-col>
      </el-row>
      <el-row :gutter="20">
          <el-col :span="10"><div id="buttonleft"></div></el-col>
          <el-col :span="11"><div id="buttonmiddle"></div></el-col>
      </el-row>
  </div>
</template>

<script>
// import * as echarts from "echarts";
import "echarts-wordcloud";
import {topleft,topright,topmiddle,buttonleft,buttonmiddle} from "../../utils/echartutil.js"
import {topRight,topMiddle,buttonLeft,buttonMiddle,toplefts} from "../../api/echartapi.js"
var echartss;
export default {
  active(){
    this.isshow = true;
  },
    deactivated() {
        console.log("组件被离开了呀");
        this.isshow = false;
        // echartss.clear();
        // echartss.dispose();
        console.log(echartss);
  },
  async mounted() {
    var echart = this.echarts
    var response1 = await toplefts()
    console.log("当前supertalk的实例",echartss);
    if(echartss!=undefined){
        echartss.dispose();
    }
    echartss = echart.init(document.getElementById("topleft"));
    var option = topleft("超话评论词云图",response1.data)
    echartss.setOption(option);
    var response = await topRight()
    var toprightoptions = topright(response.data)
    echartss = echart.init(document.getElementById("topright"));
    toprightoptions && echartss.setOption(toprightoptions);
    response = await buttonLeft()
    echartss = echart.init(document.getElementById("topmiddle"));
    var topmiddleoption = topmiddle(response.data)
    topmiddleoption && echartss.setOption(topmiddleoption)
    response = await topMiddle()
    echartss = echart.init(document.getElementById("buttonleft"));
    var bottonleftoption = buttonleft(response.data)
    bottonleftoption && echartss.setOption(bottonleftoption)
    response = await buttonMiddle()
    echartss = echart.init(document.getElementById("buttonmiddle"));
    var buttonmiddleoption = buttonmiddle(response.data)
    buttonmiddleoption && echartss.setOption(buttonmiddleoption)
  },
  data(){
    return {
      echart:"",
      value1:"",
      value2:"",
      value3:"",
      value4:"",
      options1:[],
      options2:[],
      options3:[],
      options4:[],
    }
  }
};
</script>

<style scoped>
#topleft,#topright,#topmiddle {
  height: 500px;
  width: 500px;
}
#buttonmiddle,#buttonleft{
  height: 600px;
  width: 100%;
}
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }

</style>